<template>
  <view class="box" @click="gocarddata"> 
      <view class="top">
      	  <image :src="`${ip}/${data.img}`" mode="aspectFill"></image>
      </view>
	  <view class="bu">
	  	   <view class="title">{{data.sum}}室·{{data.erea}}m^2·{{data.title}}</view>
	  	   <view class="con">{{type}} | {{data.context}}</view>
	  	   <view class="tag">
			   <view v-for="i in data.tag.split('-').splice(random,3)" :key="i">{{i}}</view>
		   </view>
		   <view class="pro">{{data.price * 30}}元/月</view>
	  </view>
  </view>
</template>

<script setup>
	import { computed } from 'vue';
import { ip } from '../../utils/getinfo';
	 const prop=defineProps(['data'])
	 const random=computed(()=>{
		   const max= prop.data.tag.split('-').length-1
		   return Math.floor(Math.random()*max)
	 })
	 const type=computed(()=>{
		 if(prop.data.type=='0') return "整租"
		 if(prop.data.type=='1') return "合租/单间"
		 if(prop.data.type=='2') return "公寓"
		 if(prop.data.type=='3') return "短租"
	     })
		 const gocarddata=()=>{
			 uni.navigateTo({
			 	url:`/pages/showdata/showdata?id=${prop.data.id}`
			 })
		 }
</script>

<style lang="scss" scoped>
	.box{
		height:100%;
		width: 100%;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;
		.top{
			height: 60%;
			width: 100%;
			image{
				height: 100%;
				width: 100%;
			}
		}
		.bu{
			width: 100%;
			height: 40%;
			padding:6rpx 20rpx ;
			overflow: hidden;
			.title{
				height:15%;
				width: 100%;
				font-size: 22rpx;
				line-height: 38rpx;
				color: #7b7b7b;
				overflow: hidden;
				white-space: nowrap;
			    text-overflow: ellipsis;
			}
			.con{
				width: 100%;
				height: 40%;
				font-size: 27rpx;
				font-weight: 700;
				line-height: 43rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.tag{
				height:15% ;
				display: flex;
				align-items: center;
                gap: 20rpx;
				font-size: 22rpx;
				display: flex;
				align-items: center;
				>view{
					padding: 5rpx 7rpx;
					border-radius: 10rpx;
					white-space: normal;
					background-color:#ebecff ;
					color: #9491f5;
				}
			}
			.pro{
				height:30% ;
				font-size: 30rpx;
				color: #ff9900;
				font-weight: 700;
				display: flex;
				align-items: center;
			}
		}
	}
	
</style>